<template>
    <div>
        <el-popover trigger="manual"
                    ref="popover"
                    @show="()=>openEWvent()" v-model="visible" placement="top-start" title="选择部门"
                    width="400">
            <section>
                <div style="max-height: 400px;overflow-y: auto">
                    <!-- 表单 -->
                    <!-- 表格 -->
                    <el-tree
                            :props="defaultProps"
                            :data="dataList"
                            :lazy="true"
                            :load="loadTreeNode"
                            node-key="id"
                            @node-click="nodeClick"
                    >
                    </el-tree>
                </div>
                <div style="margin-top: 15px;display:flex;justify-content: center;">
                    <el-button size="mini" @click="()=>{
                        visible=false
                        }">取消
                    </el-button>
                    <el-button size="mini" type="primary" @click="triggerSave">保存</el-button>
                </div>
            </section>
            <el-input :size="$props.size" @click.native="()=>{
 visible=true
            }" :value="$props.text" slot="reference" :placeholder="$attrs['placeholder']"
            ></el-input>
        </el-popover>
    
    </div>
</template>
<script>
  import * as departApi from '@/apis/depart.api.js';
  
  export default {
    props: {
      size: {
        type: [String, Number],
      },
      text: {
        type: [String, Number],
      },
    },
    data() {
      return {
        visible: false,
        dataList: [],
        defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf: (data) => (!data.haveNext),
        },
        selectData: undefined,
        treeClickCount: 0,
      };
      
    },
    mounted() {
    
    },
    methods: {
      nodeClick(node) {
        this.selectData = node;
  
  
        // region  双击事件
        //记录点击次数
        this.treeClickCount++;
        //单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
        if (this.treeClickCount >= 2) {
          return;
        }
        //计时器,计算300毫秒为单位,可自行修改
        this.timer = window.setTimeout(() => {
          if (this.treeClickCount == 1) {
            //把次数归零
            this.treeClickCount = 0;
            //单击事件处理
            console.log('单击事件,可在此处理对应逻辑');
      
      
          } else if (this.treeClickCount > 1) {
            //把次数归零
            this.treeClickCount = 0;
            //双击事件
            console.log('双击事件,可在此处理对应逻辑');
            this.triggerSave();
          }
        }, 300);
  
        // endregion
        
      },
      triggerSave() {
        this.$emit('data', this.selectData);
        this.$emit('input', this.selectData && this.selectData.id);
        this.$emit('update:text', this.selectData && this.selectData.name);
        this.visible = false;
        document.documentElement.removeEventListener('click', this.closeDialog);
        
        
      },
      loadTreeNode(node, resolve) {
        if (!(node.data.id)) {
          return resolve([]);
        }
        departApi.getList({
          pageSize: 100,
          pageNum: 1,
          haveNext: true,
          parentId: node && node.data && node.data.id,
        }).then(res => {
          resolve(res && res.data || []);
        });
      },
      async getList() {
        var result = await departApi.getList({
          pageSize: 100,
          parentId: 0,
          haveNext: true,
        });
        this.dataList = result && result.data || [];
        
        
      },
      closeDialog(e) {
        var target = e.target;
        var self = this;
        var popoverDom = self.$refs['popover'] && self.$refs['popover'].$el;
        if (!(popoverDom && popoverDom.contains(target))) {
          this.visible = false;
          document.documentElement.removeEventListener('click', this.closeDialog);
        }
        
        
      },
      initEvent() {
        
        // 初始化 點擊其他地方 關閉
        document.documentElement.removeEventListener('click', this.closeDialog);
        document.documentElement.addEventListener('click', this.closeDialog);
      },
      openEWvent() {
        this.getList();
        
        this.initEvent();
        
      },
      
    },
    
  };
</script>
